<template>
	<view>
		<cu-custom isBack="true" class="color-100">
			<block slot="right">
				<view class="color-100 margin-right bar-left justify-center" style="display: flex;" @tap="abbr">
					<image src="../../static/login/icon.png" class="content-icon"></image>
					<text style="font-size: 20px; line-height: 20px; text-align: center;">联系客服</text>
				</view>
			</block>
		</cu-custom>
		<view class="bg-set" :style="{ height: screenHeight }"></view>
		<view class="box">
			<view class="desc " :style="{paddingTop:(CustomBar + 14) + 'px'}">
				<view class="flex justify-start align-end">
					<image src="../../static/logo.png" class="logo"></image>
					<text class="desc-content">安全 真实 自主</text>
				</view>
				<view class="content">
					<text>相亲者已实名 虚假举报奖现金 海量单身 自由选择</text>
				</view>
			</view>
			<view style="margin-top: 127px;">
				<form @submit="submit">
					<view class="cu-form-group margin-top">
						<view class="cuIcon-people margin-right"></view>
						<input placeholder="请输入手机号码" name="phone" @input="changePhone"></input>
					</view>
					<view class="cu-form-group">
						<view class="cuIcon-unlock margin-right"></view>
						<input placeholder="请输入验证码" name="code"></input>
						<button class='cu-btn bg-pick radius-100 color-100 shadow' style="min-width:100px;" @click="sendCode" :disabled="count>0">
							{{count > 0 ? count + ' s' : '发送验证码'}}
						</button>
					</view>
					<view class="cu-form-group">
						<view class="cuIcon-unlock margin-right"></view>
						<input placeholder="请输入密码" name="password"></input>
					</view>
					<view class="cu-form-group border-last">
						<view class="cuIcon-friendadd margin-right"></view>
						<input placeholder="请输入邀请码" name="parentinvcode"></input>
						<view class="cu-capsule radius">
							<view class='color-gray'>
								选填
							</view>
						</view>
					</view>
					<view class="padding flex flex-direction" style="padding-bottom: 0;">
						<button class="cu-btn bg-btn-pick color-100 margin-tb-sm lg round" form-type="submit">注册</button>
					</view>
				</form>
			</view>
			
			<!-- <view>
				<text class="text-decoration">忘记密码？</text>
			</view> -->
			<view class="protocol">
				<checkbox-group class="block" @change="CheckboxChange">
					<view class="cu-form-group margin-top fixed justify-center" style="padding: 0;">
						<checkbox :class="checkbox[0].checked?'checked':''" :checked="checkbox[0].checked?true:false" value="A" style="transform:scale(0.5)"></checkbox>
						<text>注册登录即表示同意<text class="color-pink">《用户服务协议》</text>和<text class="color-pink">《用户隐私政策》</text></text>
					</view>
				</checkbox-group>
			</view>
		</view>
		<view :class='["custom-modal", "bottom-modal", isShow ? "show" : ""]'>
		  <view class="custom-dialog">
		    <view class="padding-xl">
				<view class="protocol-title"><text>联系客服</text></view>
				<image src="../../static/login/wechat.png" class="wechat"></image>
				<text class="protocol-content">131313133</text>
				
				<view class="padding flex flex-direction" style="padding-top: 0;">
					<button class="cu-btn bg-btn-pick color-100 margin-tb-sm lg round"  @tap="copyWeChat">复制微信号码联系客服</button>
				</view>
		    </view>
		  </view>
		</view>
		
	</view>
</template>

<script>
	import { mapMutations, mapActions, mapState } from 'vuex';
	import UserService from '../../service/user.js';
	
	export default {
		computed: {
			...mapState({
				isLogin: ({ user }) => user.isLogin,
			}),
		},
		data() {
			return {
				//屏幕高度
				screenHeight: 0,
				isShow: false,
				checkbox: [{
					value: 'A',
					checked: false
				}],
				count: '',
				timer: null,
				phone: ''
			}
		},
		onLoad() {
		    this.screenHeight = uni.getSystemInfoSync().windowHeight;
		},
		methods: {
			...mapActions(['register']),
			// ...mapMutations(['setLoginStatus']),
			// 点击联系客服
			abbr() {
				this.isShow = true
			},
			copyWeChat() {
				const self = this;
				uni.setClipboardData({
				    data: 'hello',
				    success: function () {
						self.isShow = false
				    }
				});
			},
			changePhone(e){
				this.phone = e.detail.value;
			},
			// 发送验证码
			async sendCode () {
				const TIME_COUNT = 60;
				if(!this.phone){
					return this.$api.msg("请输入手机号码")
				}
				
				const params = {
					type: 1,
					phone:this.phone
				}
				if (!this.timer) {
					const code = await UserService.getCode(params)
					console.log(code)
					this.count = TIME_COUNT;
					this.timer = setInterval(() => {
					if (this.count > 0 && this.count <= TIME_COUNT) {
						this.count--;
					} else {
						clearInterval(this.timer);
						this.timer = null;
					}
				   }, 1000)
				  }
			},
			CheckboxChange(e) {
				var items = this.checkbox,
					values = e.detail.value;
				for (var i = 0, lenI = items.length; i < lenI; ++i) {
					items[i].checked = false;
					for (var j = 0, lenJ = values.length; j < lenJ; ++j) {
						if (items[i].value == values[j]) {
							items[i].checked = true;
							break
						}
					}
				}
			},
			// 注册
			async submit(e) {
				let _this = this;
				const data = e.detail.value
				if(!this.checkbox[0].checked){
					return this.$api.msg("请勾选协议")
				}
				if(!data.phone){
					return this.$api.msg("手机号码必填")
				}
				if(!data.code){
					return this.$api.msg("验证码必填")
				}
				if(!data.password){
					return this.$api.msg("密码必填")
				}
				const res = await this.register(data)
				if(res) {
					_this.$jjim.config(res.id,'123456');
					_this.$jjim.register().then((res=>{
						console.log(res)
						_this.$api.msg('注册成功');
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 1000);
					}))
				}
			}
		}
	}
</script>

<style lang="scss" scoped>

	.bg-set{
		position: fixed;
		width: 100%;
		min-height: 100%;
		top: 0;
		left: 0;
		background: url(../../static/login/background.png) no-repeat;
		background-position: 0px 0px;
		background-size: cover;
		z-index: -1;
		
	}

	.box {
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		position: absolute;
		width: calc(100% - 48px);
		flex: 1;
		padding: 0 20upx;
		position: fixed;
	}
	.desc{
		.logo{
			height: 80px;
			width: 92px;
		}
		.desc-content{
			height: 33px;
			font-size: 24px;
			font-family: PingFang SC;
			font-weight: bold;
			line-height: 33px;
			color: #FFFFFF;
			margin-left: 6px;
			margin-bottom: 13px;
		}
		.content{
			color: #FFFFFF;
			font-size: 14px;
		}
	}
	.content-icon{
		width: 20px;
		height: 20px;
		margin-right: 4upx;
	}
	.color-gray{
		// font-size: 10px;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 14upx;
		color: #CCCCCC;
		opacity: 1;
	}
	.bg-btn-pick {
		background: linear-gradient(270deg, #C529DA 0%, #FA81CE 100%);
	}
	.bg-pick {
		background-color: #E428FD;
	}
	.color-pink {
		color: #E428FD;
	}
	.radius-100{
		border-radius: 16px;
		
	}
	.color-100{
		color: #FFFFFF;
	}
	.bar-left {
		// width: 100%;
		// justify-content: flex-end;
		// display: flex;
		position: absolute;
		right: 0;
	}
	.border-last{
		border-bottom: 1upx solid #707070;
	}
	.text-decoration {
		text-decoration: underline;
		font-size: 10px;
	}
	.protocol{
		text-align: center;
		font-size: 10px;
		font-weight: 500;
		line-height: 14px;
		margin-bottom: 40px;
		padding-top: 67px;
	}
	.wechat{
		display: block;
		width: 50px;
		height: 43.26px;
		margin: 10px auto;
		
	}
	.protocol-title{
		font-size: 16px;
		font-family: PingFang SC;
		font-weight: bold;
		line-height: 22px;
		text-align: left;
		color: #333333;
		// margin-bottom: 65px;
	}
	.protocol-content{
		font-size: 18px;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 25px;
		color: #666666;
		margin-bottom: 22px;
	}
/* ==================
         模态窗口
 ==================== */
	.custom-modal {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 1110;
		opacity: 0;
		outline: 0;
		text-align: center;
		-ms-transform: scale(1.185);
		transform: scale(1.185);
		backface-visibility: hidden;
		perspective: 2000upx;
		// background: rgba(0, 0, 0, 0.6);
		transition: all 0.3s ease-in-out 0s;
		pointer-events: none;
		
	}
	.custom-modal::before {
		content: "\200B";
		display: inline-block;
		height: 100%;
		vertical-align: middle;
	}
	
	.custom-modal.show {
		opacity: 1;
		transition-duration: 0.3s;
		-ms-transform: scale(1);
		transform: scale(1);
		overflow-x: hidden;
		overflow-y: auto;
		pointer-events: auto;
	}
	
	.custom-dialog {
		position: relative;
		display: inline-block;
		vertical-align: middle;
		margin-left: auto;
		margin-right: auto;
		width: 680upx;
		max-width: 100%;
		background-color: #FFFFFF;
		border-radius: 10upx;
		overflow: hidden;
		
	}
	
	.custom-modal.bottom-modal::before {
		vertical-align: bottom;
	}
	
	.custom-modal.bottom-modal .custom-dialog {
		width: 100%;
		border-radius: 10px 10px 0px 0px;
		box-shadow: 0px -3px 6px rgba(0, 0, 0, 0.16);
	}
	
	.custom-modal.bottom-modal {
		margin-bottom: -1000upx;
	}
	
	.custom-modal.bottom-modal.show {
		margin-bottom: 0;
	}
	
	.custom-modal.drawer-modal {
		transform: scale(1);
		display: flex;
	}
	
	.custom-modal.drawer-modal .custom-dialog {
		height: 100%;
		min-width: 200upx;
		border-radius: 0;
		margin: initial;
		transition-duration: 0.3s;
	}
	
	.custom-modal.drawer-modal.justify-start .custom-dialog {
		transform: translateX(-100%);
	}
	
	.custom-modal.drawer-modal.justify-end .custom-dialog {
		transform: translateX(100%);
	}
	
	.custom-modal.drawer-modal.show .custom-dialog {
		transform: translateX(0%);
	}
	.custom-modal .custom-dialog>.custom-bar:first-child .action{
	  min-width: 100rpx;
	  margin-right: 0;
	  min-height: 100rpx;
	}
	
	
</style>
